<template>
  <!-- 关联知识库对话框 -->
  <el-dialog :visible.sync="visible"
    @open="open"
    @closed='closedRelatedKnowledgeDialog'
    :title="relatedKnowledgeDialogTitle"
    width="50%">
    <el-row>
      <el-col :span="24">
        <el-input v-model="rkSearchContent" placeholder="请输入关键词" @change="searchRK">
          <div slot="prepend" class="el-icon-search"></div>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-if="visible" :data="relatedKnowledgeList"
                  @select="handleSelect"
                  @select-all="handleSelectAll"
                  row-key="id"
                  ref="relatedKnowledgeTable"
                  :max-height="CONST.WORKSPACE_HEIGHT - 350"
                  show-checkbox
                  stripe>
          <el-table-column align="center"
                           type="selection"
                           width="50">
          </el-table-column>
          <el-table-column label="知识名称" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-html="scope.row.name"/>
            </template>
          </el-table-column>
          <el-table-column label="发布状态" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.status ? '已发布' : '未发布' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination v-if="total > pageSize" :page-size.sync="pageSize"
                       :current-page.sync="currentPage"
                       :total="total" background
                       layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 10px"/>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
              <el-button @click="visible = false">取 消</el-button>
              <el-button type="primary" @click="addRelatedKnowledge">确 定</el-button>
            </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "NewRelatedKnowledgeDialog",
    data() {
      return {
        visible: false,
        relatedKnowledgeDialogTitle: "",
        rkSearchContent: "",
        relatedKnowledgeList: [],
        checkedList: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
      }
    },
    props: ['crtField', 'knowledgeLibId'],
    methods: {
      handleSelect(selection, row) {
        if (selection.includes(row)) {
          this.checkedList.push({
            id: row.id,
            name: row.name + (row.status ? '(已发布)' : '(未发布)')
          })
        }
        else {
          let item = this.checkedList.find(item => item.id === row.id)
          this.checkedList.remove(item)
        }
      },
      handleSelectAll(selection) {
        // 取消选中;
        if (selection.length === 0) {
          this.relatedKnowledgeList.forEach(row => {
            let item = this.checkedList.find(item => item.id === row.id)
            this.checkedList.remove(item)
          })
        }
        // 选中;
        else {
          selection.filter(selectionItem => !this.checkedList.map(item => item.id).includes(selectionItem.id))
            .forEach(item => this.checkedList.push({
              id: item.id,
              name: item.name + (item.status ? '(已发布)' : '(未发布)')
            }))
        }
      },
      closedRelatedKnowledgeDialog() {
        this.rkSearchContent = ''
        this.visible = false
      },
      searchRK() {
        this.currentPage = 1
        this.getRelatedKnowledge()
      },
      open() {
        this.relatedKnowledgeList = []
        this.total = 0
        this.currentPage = 1
        this.checkedList = JSON.parse(JSON.stringify(this.crtField.fieldValue))
        if (this.crtField.kind === 8) {
          this.relatedKnowledgeDialogTitle = "关联本知识库"
        } else if (this.crtField.kind === 9) {
          this.relatedKnowledgeDialogTitle = "关联其他知识库"
        }
        this.getRelatedKnowledge()
      },
      getRelatedKnowledge() {
        // 获取所有可选知识
        this.axios.get("/pmph/action/knowledge/selectRelatedKnowledge", {
          params: {
            name: this.rkSearchContent,
            knowledgeLibId: this.crtField.kindValue || this.knowledgeLibId,
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
        }).then((res) => {
          this.relatedKnowledgeList = res.data.records
          this.total = res.data.total
          // 反显;
          this.$nextTick(() => {
            this.relatedKnowledgeList.filter(item => this.checkedList.map(checkedItem => checkedItem.id).includes(item.id))
              .forEach(item => this.$refs.relatedKnowledgeTable.toggleRowSelection(item,true))
            })
          })
      },
      addRelatedKnowledge() {
        this.crtField.fieldValue = this.checkedList
        this.visible = false
      },
    },
    watch: {
      currentPage() {
        this.getRelatedKnowledge()
      }
    }
  }
</script>

<style scoped>

</style>
